<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="分红池">
                <a-select v-model="queryParam.pool_id" placeholder="请选择分红池" allowClear>
                  <a-select-option v-for="(item, index) in poollist" :key="item.id" :value="+item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="分红期数">
                <a-input v-model="queryParam.cycle_no" placeholder="请输入分红期数" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="分红用户">
                <a-input v-model="queryParam.user_id" placeholder="请输入用户ID" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="分红时间">
                <a-range-picker @change="dateChange" placeholder="请选择分红时间" allowClear style="width: 100%" />
                <!-- <a-date-picker @change="dateChange" placeholder="请选择分红时间" allowClear style="width: 100%" /> -->
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="searchData">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <div class="table-operator flex-y-center flex-x-sb">
        <a-radio-group v-model="queryParam.status" @change="statusChange">
          <a-radio-button :value="''"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 已达标 </a-radio-button>
          <a-radio-button :value="3"> 已发放 </a-radio-button>
        </a-radio-group>
        <div>检索结果 {{ totalCount || 0 }} 条，分红金额 {{ total_price || 0 }} 元。</div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
      >
        <template slot="user" slot-scope="text, record">
          <img src="record.user.avatar_url" alt="" style="width: 30px; height: 30px; border-radius: 50%" />
          / {{ record.user.nickname }}
        </template>
        <template slot="status" slot-scope="text, record">
          {{ record.status == 1 ? '已达标' : record.status == 2 ? '已结算' : record.status == 2 ? '已发放' : '-' }}
        </template>
        <template slot="qualify_at" slot-scope="text, record">
          {{ record.qualify_at ? record.qualify_at : '-' }}
        </template>
        <template slot="send_at" slot-scope="text, record">
          {{ record.send_at ? record.send_at : '-' }}
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { poolList, poolUserLog } from '@/api/plat'

export default {
  name: 'pool-total-list-page',
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 60,
        },
        {
          title: '用户ID',
          dataIndex: 'user_id',
          width: 80,
        },
        {
          title: '会员信息',
          dataIndex: 'user',
          scopedSlots: { customRender: 'user' },
          width: 150,
        },
        {
          title: '分红池名称',
          dataIndex: 'pool.name',
          width: 120,
        },
        {
          title: '期数',
          dataIndex: 'cycle_no',
          width: 130,
        },
        {
          title: '本期金额',
          dataIndex: 'pool_now',
          width: 100,
        },
        {
          title: '达标人数',
          dataIndex: 'reach_num',
          width: 100,
        },
        {
          title: '分红金额',
          dataIndex: 'money',
          width: 100,
        },
        {
          title: '分红累计',
          dataIndex: 'total',
          width: 100,
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: 120,
        },
        {
          title: '达标时间',
          dataIndex: 'qualify_at',
          scopedSlots: { customRender: 'qualify_at' },
          width: 150,
        },
        {
          title: '分红发放时间',
          dataIndex: 'send_at',
          scopedSlots: { customRender: 'send_at' },
          width: 150,
        },
      ],
      queryParam: {
        pool_id: undefined,
        cycle_no: '',
        user_id: '',
        send_at: '',
        status: '',
      },
      loading: false,
      dataSource: [],
      totalCount: 0,
      total_price: 0,
      pageNo: 1,
      pageSize: 10,

      poollist: [],
    }
  },
  created() {
    this.getPoolList() // 分池列表
    this.getList() //分红池 带用户列表
  },
  methods: {
    async getPoolList() {
      var newObj = {}
      newObj = { pageNo: 1, pageSize: 99999 }
      const res = await poolList(newObj)
      if (!res.code) {
        this.poollist = res.data.data
      }
    },
    async getList() {
      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      const res = await poolUserLog(newObj)
      this.loading = false
      if (!res.code) {
        this.dataSource = res.data.data
        this.totalCount = res.data.totalCount
        this.total_price = res.data.total_price
      }
    },
    searchData() {
      this.pageNo = 1
      this.getList()
    },
    tablePageChange(e) {
      this.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getList()
    },
    statusChange(e) {
      this.queryParam.status = e.target.value
      this.getList()
    },
    dateChange(date, dateString) {
      this.queryParam.send_at = dateString[0] != '' ? `${dateString[0]}/${dateString[1]}` : ''
      // this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.condition {
  min-width: 330px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.pa10 {
  padding: 10px 5px;
  background-color: #fff;
  margin-bottom: 10px;
}
.statistic {
  width: 12.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #000;
  .money {
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
